import React from 'react';
import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export const ActivityHeatmap = ({ dailyPattern }) => {
  const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  
  const maxVisits = Math.max(...dailyPattern);
  const colors = dailyPattern.map(visits => {
    const intensity = maxVisits > 0 ? visits / maxVisits : 0;
    if (intensity > 0.7) return 'rgba(72, 187, 120, 0.8)';
    if (intensity > 0.4) return 'rgba(102, 126, 234, 0.8)';
    if (intensity > 0.2) return 'rgba(255, 193, 7, 0.8)';
    return 'rgba(245, 101, 101, 0.8)';
  });

  const data = {
    labels: dayNames,
    datasets: [
      {
        label: 'Visits',
        data: dailyPattern,
        backgroundColor: colors,
        borderColor: colors.map(c => c.replace('0.8', '1')),
        borderWidth: 1
      }
    ]
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.parsed.y} visits`;
          }
        }
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          color: 'rgba(255, 255, 255, 0.7)',
          precision: 0
        },
        title: {
          display: true,
          text: 'Number of Visits',
          color: 'rgba(255, 255, 255, 0.7)'
        }
      },
      x: {
        ticks: {
          color: 'rgba(255, 255, 255, 0.7)'
        },
        title: {
          display: true,
          text: 'Day of Week',
          color: 'rgba(255, 255, 255, 0.7)'
        }
      }
    }
  };

  return (
    <div style={{ height: '300px', width: '100%' }}>
      <Bar data={data} options={options} />
    </div>
  );
};

